<template>
  <div>
    <a-tree size="large" v-model:selectedKeys="selectedKeys" :field-names="fieldNames" :tree-data="props.treeData" show-icon default-expand-all :class="['depart-side-tree', 'employees-side-tree', {'is-local': isEnvLocal}]" style="width: 220px;" @select="(selectedKeys, {selectedNodes}) => {emits('onSelect', selectedKeys, selectedNodes)}" :blockNode="true">
      <template v-slot:title="title">
        <div class="tree-title">
          <span class="title-name">{{ title.name }}</span>
          <span class="right-operate" v-if="!isEnvLocal">
            <span v-if="title.isParent" @click.stop="()=> {emits('onEdit', title, true)}">
              <plus-outlined />新建分组
            </span>
            <span v-else>
              <a-space v-if="!title.flag">
                <edit-outlined @click.stop="()=> {emits('onEdit', title)}" />
                <delete-outlined @click.stop="()=> {emits('onDelete', title)}" />
              </a-space>
            </span>
          </span>
        </div>
      </template>
    </a-tree>
  </div>

</template>
<script setup name="sideTree">
import { ref, watch } from 'vue'
import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
const emits = defineEmits(['onSelect', 'onEdit', 'onDelete'])
const props = defineProps({
  defaultSelect: {
    type: Array,
    default: () => []
  },
  openSide: {
    type: Boolean,
    default: () => true
  },
  treeData: {
    type: Array,
    default: () => []
  }
})
const fieldNames = { children: 'children', title: 'label', key: 'id' }
const selectedKeys = ref([])
let isEnvLocal = ref(process.env.VUE_APP_CONFIG == 'local')
watch(() => props.defaultSelect, (newVal) => {
  selectedKeys.value = newVal
}, { deep: true, immediate: true })
</script>
